<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 1000px;
			margin: 0 auto;
		}
		.header{
			height: 40px;
			background:#337ab7;
			line-height: 40px;
			padding-left:20xp;
			border-radius: 5px;	
		}
		.header span{
			font-size: 20px;
			color:#fff;
		}
		.box p{
			border-radius: 5px;	
			height: 50px;
			border: 1px solid #337ab7;
			line-height: 50px;
		}
		.box p input{
			height: 20px;
		}
		.box p .bu{
			height: 24px;
			margin: 4px;
			width: 40px;
			background:#337ab7;
			border:none;
			color:#fff;
			border-radius: 5px;

		}
		table{
			text-align: center;
		}
		.del{
			background:#fff;
			border:none;
		}
	</style>
</head>
<body>
	<div class="box">
	<div class="header">
		<span>添加商品</span>
	</div>
	<p>ID <input type="text"  class="id" value="">Name <input type="text" class="name" value=""><input class="bu" type="button" value="添加" onclick="zj()">搜索名称关键字<input type="text" class="sosuo" onkeyup="sou()" value="">	</p>
	<div class="table-responsive">
      <table border="1" cellspacing="0" class="tb">
        <thead >
          <tr>
            <th width="106">ID</th>
            <th width="257">Name</th>
            <th width="390">Ctime</th>
            <th width="229">Delete</th>
          </tr>
        </thead>
        <tbody>
        	<!-- <tr>
            	<td>1</td>
                <td>宝马</td>
                <td>2019-5-6 16:50</td>
                <td><button class="del" onclick="delecttr(this)">删除</button></td>
            </tr> -->
        </tbody>
      </table>
    </div>
</div>

</body>
<script>
	function zj(){
		var ID=document.querySelector('.id').value;
		console.log(ID)
		var Name=document.querySelector('.name').value;
		console.log(Name)
		var zhu=document.querySelector('tbody');
		console.log(Name)
		var time=new Date()
	var nn=time.getFullYear()
	var yy=time.getMonth()+1
	var rr=time.getDate()
	var ss=time.getHours()
	var ff=time.getMinutes()
	var mm=time.getSeconds()
	var tt=nn+'-'+yy+'-'+rr+' '+ss+':'+ff+':'+mm
		var str=`
			<tr>
            	<td>${ID}</td>
                <td>${Name}</td>
                <td>${tt}</td>
                <td><button class="del" onclick="delecttr(this)">删除</button></td>
            </tr>
		`
		console.log(str)
		zhu.insertAdjacentHTML('beforeend',str);
		
	}
	function delecttr(obj){
        var tr = obj.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
        }
        function sou() {
    var input = document.querySelector(".sosuo");
    var val = input.value;
    var table = document.querySelector(".tb");
    var tr = table.querySelectorAll("tr");

    for (var i = 0; i < tr.length; i++) {
        var td = tr[i].querySelectorAll("td")[1];
        if (td) {
        if (td.innerHTML.indexOf(val) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
     } 
    }
}
</script>
</html>